import React from 'react'
import NavBar from '../../components/navBar/navBar'
import './add.scss'
import {List,InputItem,Picker,ImagePicker,TextareaItem,Grid,Toast} from 'antd-mobile'
import axios from '../../utils/axios.js'
let Item=List.Item
export default class Add extends React.Component{
  constructor(){
    super()
    this.state={
      community:{
        id:'',
        name:''
      },
      price: '',// 价格
      size: '',// 面积
      roomType: '',// 房屋类型
      floor: '',// 楼层
      oriented: '',// 朝向：
      title: '',// 房屋标题
      houseImg: [],// 房屋图片
      supporting: '',// 房屋配套：
      description: ''// 房屋描述
    }
    this.package=[]
  }
    getPickvalue=(type,value)=>{
      console.log(type,'666',value)
        this.setState({
          [type]:value
        })
    }
    imgChange=(file)=>{
       this.setState({
         houseImg:file
       })
    }
    packageChange=(data)=>{
       let index=this.package.indexOf(data.name)
       if(index>-1){
         this.package.splice(index,1)
       }else{
        this.package.push(data.name)
       }
       this.setState({
        supporting:this.package.join("|")
       })
    }
    submit=async()=>{
      let {
        price,
        size,
        roomType,
        floor,
        oriented,
        title ,
        houseImg,
        supporting,
        description,
        community
      }=this.state
      let imgarr=[]
      if(houseImg.length>0){
        let form=new FormData()
        houseImg.forEach(item=>{
          form.append('file',item.file)
        })
        let imgres=await axios.post('/houses/image',form,{
           header:{
             'Content-type':'multipart/form-data'
           }
        })
        if(imgres.status===200){
           imgarr=imgres.data.body.join('|')
        }else{
          Toast.info('图片上传失败',1)
        }
      }
      let res=await axios.post('/user/houses',{
        price,
        size,
        roomType,
        floor,
        oriented,
        title ,
        houseImg:imgarr,
        supporting,
        description,
        community: 973,
      })
      console.log(res,'6666')
      if(res.status===200){
        this.props.history.go(-1)
      }
    }
    cancel=()=>{
      this.setState({
        community:{
          id:'',
          name:''
        },
        price: '',// 价格
        size: '',// 面积
        roomType: '',// 房屋类型
        floor: '',// 楼层
        oriented: '',// 朝向：
        title: '',// 房屋标题
        houseImg: [],// 房屋图片
        supporting: '',// 房屋配套：
        description: ''// 房屋描述
      })
      this.package=[]
      this.props.history.go(-1)
    }
    render(){
      let {
        price,
        size,
        roomType,
        floor,
        oriented,
        title ,
        houseImg,
        supporting,
        description
      }=this.state
        return <div className='rent-add'>
            <NavBar>发布房源</NavBar>
            <div>
                <List  className="add-list" renderHeader={() => '房源信息'}>
                    <Item arrow="horizontal" extra={'请输入小区名称'} >小区名称  </Item>
                    <InputItem  extra={'￥/月'}  placeholder='请输入租金/月' value={price} onChange={value=>this.getPickvalue('price',value)}>租&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金</InputItem>
                    <InputItem  extra={'㎡'}  placeholder='请输入建筑面积' value={size} onChange={value=>this.getPickvalue('size',value)}>建筑面积</InputItem>
                    <Picker extra="请选择" data={roomTypeData}  title="房屋户型" cols={1} onChange={value=>this.getPickvalue('roomType',value)} value={roomType}>
                        <Item arrow="horizontal" extra={'请选择'} >户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型</Item>
                    </Picker>
                    <Picker extra="请选择" data={floorData}  title="所在楼层" cols={1}  onChange={value=>this.getPickvalue('floor',value) } value={floor}>
                        <Item arrow="horizontal" extra={'请选择'} >所在楼层</Item>
                    </Picker>
                    <Picker extra="请选择" data={orientedData}  title="房屋朝向" cols={1} onChange={value=>this.getPickvalue('oriented',value)} value={oriented}>
                        <Item arrow="horizontal" extra={'请选择'} >朝&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;向</Item>
                    </Picker>
                    <Item >房屋标题</Item>
                    <InputItem   placeholder="请输入标题（例如：整租 小区名 2室 5000元）" value={title} onChange={value=>this.getPickvalue('title',value)}></InputItem>
                    <Item >房屋图像</Item>
                    <ImagePicker
                        files={houseImg}
                        onChange={this.imgChange}
                        multiple
                    />
                    <Item >房屋配置</Item>
                    <Grid
                        data={HOUSE_PACKAGE}
                        columnNum={5}
                        hasLine={false}
                        square={false}
                        renderItem={(data)=>{
                            let active=supporting.split('|').includes(data.name)?'active':''
                            return <div key={data.id} className={`${active} grid-item`} onClick={e=>this.packageChange(data)}>
                                    <i className={`iconfont ${data.icon}`}></i>
                                    <span className="grid-text" >{data.name}</span>
                                </div>
                        }}
                    >
                    </Grid>
                </List>
                <List renderHeader={() => '房屋描述'} className="list">
                    <TextareaItem
                        value={description}
                        autoHeight
                        labelNumber={5}
                        rows={5}
                        onChange={value=>this.getPickvalue('description',value)}
                    />
                </List>
                <div className='foot'>
                    <div className='cancel' onClick={this.cancel}>取消</div>
                    <div className='ok' onClick={this.submit}>确定</div>
                </div>
            </div>
        </div>
    }
}

// 所有房屋配置项
const HOUSE_PACKAGE = [
    {
      id: 1,
      name: '衣柜',
      icon: 'icon-wardrobe'
    },
    {
      id: 2,
      name: '洗衣机',
      icon: 'icon-wash'
    },
    {
      id: 3,
      name: '空调',
      icon: 'icon-air'
    },
    {
      id: 4,
      name: '天然气',
      icon: 'icon-gas'
    },
    {
      id: 5,
      name: '冰箱',
      icon: 'icon-ref'
    },
    {
      id: 6,
      name: '暖气',
      icon: 'icon-Heat'
    },
    {
      id: 7,
      name: '电视',
      icon: 'icon-vid'
    },
    {
      id: 8,
      name: '热水器',
      icon: 'icon-heater'
    },
    {
      id: 9,
      name: '宽带',
      icon: 'icon-broadband'
    },
    {
      id: 10,
      name: '沙发',
      icon: 'icon-sofa'
    }
  ]

  // 房屋类型
const roomTypeData = [
  { label: '一室', value: 'ROOM|d4a692e4-a177-37fd' },
  { label: '二室', value: 'ROOM|d1a00384-5801-d5cd' },
  { label: '三室', value: 'ROOM|20903ae0-c7bc-f2e2' },
  { label: '四室', value: 'ROOM|ce2a5daa-811d-2f49' },
  { label: '四室+', value: 'ROOM|2731c38c-5b19-ff7f' }
]

// 朝向：
const orientedData = [
  { label: '东', value: 'ORIEN|141b98bf-1ad0-11e3' },
  { label: '西', value: 'ORIEN|103fb3aa-e8b4-de0e' },
  { label: '南', value: 'ORIEN|61e99445-e95e-7f37' },
  { label: '北', value: 'ORIEN|caa6f80b-b764-c2df' },
  { label: '东南', value: 'ORIEN|dfb1b36b-e0d1-0977' },
  { label: '东北', value: 'ORIEN|67ac2205-7e0f-c057' },
  { label: '西南', value: 'ORIEN|2354e89e-3918-9cef' },
  { label: '西北', value: 'ORIEN|80795f1a-e32f-feb9' }
]

// 楼层
const floorData = [
  { label: '高楼层', value: 'FLOOR|1' },
  { label: '中楼层', value: 'FLOOR|2' },
  { label: '低楼层', value: 'FLOOR|3' }
]